﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditProduct.aspx.cs" EnableEventValidation="false"
    Inherits="Skyworth.CRM.Web.BasicData.EditProduct" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>编辑产品信息</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <%--[if IE]>
     <link href="../themes/css/ieHack.css" rel="stylesheet" type="text/css" />
    <![endif]--%>
    <link href="../themes/default/style.css" rel="stylesheet" type="text/css" />
    <link href="../themes/css/core.css" rel="stylesheet" type="text/css" />
    <link href="../themes/css/pages.css" rel="stylesheet" type="text/css" />
    <link href="../javascripts/uploadifyV3/uploadify.css" rel="stylesheet" type="text/css" />
    <link href="../themes/css/Messagebox.css" rel="stylesheet" type="text/css" />

    <script src="../javascripts/jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="../javascripts/MessageBox.js" type="text/javascript"></script>

    <script type="text/javascript" src="../javascripts/uploadifyV3/swfobject.js"></script>

    <script type="text/javascript" src="../javascripts/uploadifyV3/jquery.uploadify.min.js"></script>

    <style type="text/css">
        .red
        {
            color: Red;
            font-weight: bold;
        }
        table.layout
        {
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
            width: 100%;
            border: solid 1px #e7e7e7;
        }
        table.layout tr td
        {
            border-bottom: solid 1px #e7e7e7;
            padding: 0px 3px;
            background-color: #EFEFEF;
        }
        table.layout td label
        {
            padding: 2px 2px;
        }
        table.layout td.left
        {
            border-right: solid 1px #e7e7e7;
            width: 65px;
        }
        table.layout td.right
        {
            background: #FFF;
        }
        table.layout td.right, table.layout td.readOnly
        {
            padding: 5px 3px;
        }
        .mune_thumb
        {
            float: left;
            margin-top: 8px;
            margin-left: 5px;
            border: 1px solid #ccc;
            height: 240px;
            width: 240px;
            padding: 5px;
        }
        .mune_thumb img
        {
            border: 1px solid #ccc;
            padding: 5px;
            background: #fff;
            height: 100px;
            width: 100px;
            display: block;
        }
        .uploadifyQueue
        {
            border: 1px solid #E5E5E5;
            height: 202px;
            margin-bottom: 2px;
            width: 375px;
        }
        select
        {
            width: 185px;
            height: 25px;
        }
    </style>

    <script type="text/javascript">
        function SaveCheck() {
            var brandId = $("#ddlBrand").val();
            if (brandId <= 0) {
                alert("请选择所属品牌！");
                return false;
            }
            var productTypeId = $("#ddlProductType").val();
            var txtTypeId = $("#txtProductTypeId").val();
            if (productTypeId <= 0 || txtTypeId <= 0) {
                alert("请选择所属分类！");
                return false;
            }

            var objProductName = $("#txtProductName");
            var name = objProductName.val();
            if (name == "" || name.length <= 0) {
                alert("请输入产品名称！");
                objProductName.focus();
                return false;
            }
            var objUnitVolume = $("#txtUnitVolume");
            var volume = objUnitVolume.val();
            if (volume != "" && !new RegExp(/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/).test(volume)) {
                alert("单位体积，请输入正确的数字格式！");
                objUnitVolume.focus();
                return false;
            }

        }

        function LoadProductType(brandId, callback) {
            var paramList = '{"brandId":"' + brandId + '"}';
            $.ajax({
                type: "POST",
                url: "Products.aspx/getProductType",
                contentType: "application/json; charset=utf-8",
                data: paramList,
                dataType: "json",
                global: false,
                success: function(data) {
                    var dataTable = jQuery.parseJSON(data.d);
                    $.each(dataTable, function(i, item) {
                        $("<option value='" + item.Id + "'>" + item.Name + "</option>").appendTo($("#ddlProuctType"));

                    });

                    if (typeof (callback) == "function") {
                        callback();
                    }
                },
                error: function(msg) {
                    $.Messager.Alert({ Title: '系统消息', Message: "发生异常，获取分类数据失败！", Icon: IconType.Warning });
                }
            })
        }

        function UpLoad() {
            if ($("div.mune_thumb input[type='hidden'][value='#']").length > 0) {
                $('#custom_file_upload').uploadifyUpload();
            }
            else {
                $.Messager.Alert({ Title: '系统消息', Message: "已经上传了4张产品图片！", Icon: IconType.Warning });
            }
        }

        function UpLoad2() {
            $('#custom_file_upload2').uploadifyUpload();
        }

        $(document).ready(function() {
            $("input[type=text],textarea").addClass("textInput").width(180).focus(function() { $(this).addClass("focus"); }).blur(function() { $(this).removeClass("focus") });
            $("div.button").hover(function() { $(this).addClass("buttonHover"); },
                                 function() { $(this).removeClass("buttonHover"); });
            $("div.buttonActive").hover(function() { $(this).addClass("buttonActiveHover"); },
                                function() { $(this).removeClass("buttonActiveHover"); })


            $("#btnClose").click(function() {
                parent.addWindow.close();
            })
            $("#btnSave").click(function() {
                return SaveCheck();
            })

            $("#ddlProuctType").change(function() {
                $("#txtProductTypeId").val($(this).val());
            })

            $("#ddlBrand").change(function() {
                $("#ddlProuctType option[value!='-1']").remove();
                $("#txtProductTypeId").val("-1");
                if ($(this).val() != "-1") {
                    LoadProductType($("#ddlBrand").val());
                }
            })

            $('#custom_file_upload').uploadify({
                'uploader': '../javascripts/uploadifyV3/uploadify.swf',
                'script': '../Service/ProductImages.ashx',
                'cancelImg': '../javascripts/uploadifyV3/cancel.png',
                'folder': '../ProductImages/Images',
                'multi': true,
                'auto': false,
                'fileExt': '*.jpg;*.gif;',
                'fileDesc': 'Image Files (.JPG, .GIF)',
                'queueID': 'custom-queue',
                'queueSizeLimit': 4,
                'simUploadLimit': 4,
                'sizeLimit': 1024000,
                'removeCompleted': true,
                'onCancel': function(event, ID, fileObj, data) {
                    $('#status-message').text("你已经选择了【" + data.fileCount + '】张图片，最多可以上传【4】张图片.');
                },
                'onSelectOnce': function(event, data) {
                    $('#status-message').text("你已经选择了【" + data.fileCount + '】张图片，最多可以上传【4】张图片.');
                },
                'onAllComplete': function(event, data) {
                    $('#status-message').text("成功上传【" + data.filesUploaded + "】张图片");
                },
                'onComplete': function(event, ID, fileObj, response, data) {
                    $("div.mune_thumb table tr td a[href='#']").eq(0).attr("href", "../ProductImages/Images/" + response).find("img").eq(0).attr("src", "../ProductImages/Thumbnail/" + response);
                    $("div.mune_thumb input[type='hidden'][value='#']").eq(0).val(response);
                }
                //                'checkScript': '../Service/ProductImages.ashx?onCheck=Y',
                //                'onCheck': function(event, ID, fileObj, response, data) {
                //                    $('#file_upload' + key).find('.percentage').text(' - 图片已经存在！');
                //                }
            });
            // 产品附件上传
            $('#custom_file_upload2').uploadify({
                'uploader': '../javascripts/uploadifyV3/uploadify.swf',
                'script': '../Service/ProductAttachment.ashx',
                'cancelImg': '../javascripts/uploadifyV3/cancel.png',
                'folder': '../ProductAttachment',
                'multi': true,
                'auto': false,
                'fileExt': '*.doc;*.docx;*.rar;*.pdf;*.rar;*.xlsx;*.xls',
                'fileDesc': 'Files (.doc, .pdf,.rar,.xls)',
                'queueID': 'custom-queue2',
                'queueSizeLimit': 4,
                'simUploadLimit': 4,
                'sizeLimit': 1024000,
                'removeCompleted': true,
                'onCancel': function(event, ID, fileObj, data) {
                    $('#status-message2').text("你已经选择了【" + data.fileCount + '】个附件，最多可以上传【4】个附件.');
                },
                'onSelectOnce': function(event, data) {
                    $('#status-message2').text("你已经选择了【" + data.fileCount + '】个附件，最多可以上传【4】个附件.');
                },
                'onAllComplete': function(event, data) {
                    $('#status-message2').text("成功上传【" + data.filesUploaded + "】个附件");
                },
                'onComplete': function(event, ID, fileObj, response, data) {
                    alert("上传成功!");
                    //                    $("div.mune_thumb table tr td a[href='#']").eq(0).attr("href", "../ProductImages/Images/" + response).find("img").eq(0).attr("src", "../ProductImages/Thumbnail/" + response);
                    //                    $("div.mune_thumb input[type='hidden'][value='#']").eq(0).val(response);
                }
            });
            $("div.tabsHeaderContent ul li").click(function() {
                var $this = $(this);
                if ($this.attr("class") != "selected") {
                    $this.addClass("selected").siblings("li").removeClass("selected");
                    $($this.attr("rel")).show().siblings("div[class!='readOnly']").hide();
                }
            })

            var $div = $('<div></div>').css({ position: 'absolute', background: "#fff", height: '18' });
            $("div.mune_thumb table tr td a[href!='#']").hover(function() {
                var imgTop = $(this).offset().top;
                var imgHeight = $(this).height();
                var imgWidth = $(this).width();
                var imgId = $(this).attr("id");
                $div.html("<a href=\"Javascript:removeImage(\'" + imgId + "\')\" style='display:block,color:#FFF'>移除该图片</a>");
                var divHeight = $div.height();
                $div.css({ top: (imgTop + imgHeight - divHeight), left: $(this).offset().left, width: imgWidth }).fadeIn('normal').appendTo(document.body);
            }, function() {
                $div.fadeOut('normal');
            });
        })

        function removeImage(imgId) {
            $("#" + imgId).attr("href", "#").find("img").eq(0).attr("src", "../ProductImages/Thumbnail/No.jpg");
            $("#txt" + imgId).val("#");
        }
        
    </script>

</head>
<body style="text-align: left; background-color: White;">
    <form id="form1" runat="server">
    <div>
        <div class="tabs">
            <div class="tabsHeader">
                <div class="tabsHeaderContent">
                    <ul>
                        <li class="selected" rel="#productInfo"><a href="javascript:void(0)"><span>产品基本信息</span></a></li>
                        <li class="" rel="#productImages"><a href="javascript:void(0)"><span>产品图片信息</span></a></li>
                        <li class="" rel="#productAttachment"><a href="javascript:void(0)"><span>产品附件信息</span></a></li>
                    </ul>
                </div>
            </div>
            <div class="tabsContent">
                <div style="display: block;" id="productInfo">
                    <table width="100%" class="layout">
                        <tr>
                            <td class="left">
                                <label for="ddlBrand">
                                    所属品牌：</label>
                            </td>
                            <td class="right">
                                <asp:DropDownList ID="ddlBrand" runat="server" DataTextField="BrandName" DataValueField="BrandId"
                                    AppendDataBoundItems="True">
                                    <asp:ListItem Value="-1">【请选择所属品牌】</asp:ListItem>
                                </asp:DropDownList>
                                <em class="red">*</em>
                            </td>
                            <td class="left">
                                <label for="ddlProductType">
                                    产品分类：</label>
                            </td>
                            <td class="right">
                                <asp:DropDownList ID="ddlProuctType" runat="server">
                                    <asp:ListItem Value="-1">【请选择所属分类】</asp:ListItem>
                                </asp:DropDownList>
                                <em class="red">*</em>
                                <asp:HiddenField ID="txtProductTypeId" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td class="left">
                                <label for="txtProductName">
                                    产品名称：</label>
                            </td>
                            <td class="right">
                                <asp:TextBox ID="txtProductName" runat="server" MaxLength="150" title="请输入产品名称!"></asp:TextBox>
                                <em class="red">*</em>
                            </td>
                            <td class="left">
                                <label for="txtProductCode">
                                    产品编码：</label>
                            </td>
                            <td class="right">
                                <asp:TextBox ID="txtProductCode" runat="server" MaxLength="50" title="请输入产品编码!"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">
                                <label for="txtProductModel">
                                    产品型号：</label>
                            </td>
                            <td class="right">
                                <asp:TextBox ID="txtProductModel" runat="server" MaxLength="50" title="请输入产品型号!"></asp:TextBox>
                            </td>
                            <td class="left">
                                <label for="txtProductUnit">
                                    产品单位：</label>
                            </td>
                            <td class="right">
                                <asp:TextBox ID="txtProductUnit" runat="server" MaxLength="25" title="请输入产品单位!"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">
                                <label for="txtProductSize">
                                    产品尺寸：</label>
                            </td>
                            <td class="right">
                                <asp:TextBox ID="txtProductSize" runat="server" MaxLength="50" title="请输入产品尺寸!"></asp:TextBox>
                            </td>
                            <td class="left">
                                <label for="txtPackingSize">
                                    包装尺寸：</label>
                            </td>
                            <td class="right">
                                <asp:TextBox ID="txtPackingSize" runat="server" MaxLength="50" title="请输入包装尺寸!"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">
                                <label for="txtUnitVolume">
                                    单位体积：</label>
                            </td>
                            <td class="right">
                                <asp:TextBox ID="txtUnitVolume" runat="server" MaxLength="50" title="请输入单位体积!"></asp:TextBox>
                            </td>
                            <td class="left">
                                <label for="txtSource">
                                    来源：</label>
                            </td>
                            <td class="right">
                                <asp:TextBox ID="txtSource" runat="server" MaxLength="50" title="请输入产品来源!"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">
                                <label for="txtPackStandard1">
                                    装箱数量20尺柜：</label>
                            </td>
                            <td class="right">
                                <asp:TextBox ID="txtPackStandard1" runat="server" MaxLength="50" title="装箱数量20尺柜!"></asp:TextBox>
                            </td>
                            <td class="left">
                                <label for="txtPackStandard2">
                                    装箱数量40尺：</label>
                            </td>
                            <td class="right">
                                <asp:TextBox ID="txtPackStandard2" runat="server" MaxLength="50" title="装箱数量40尺!"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">
                                <label for="txtPackStandard3">
                                    装箱数量40尺柜：</label>
                            </td>
                            <td class="right">
                                <asp:TextBox ID="txtPackStandard3" runat="server" MaxLength="50" title="装箱数量40尺柜!"></asp:TextBox>
                            </td>
                            <td class="left">
                                <label for="IsDetail">
                                    是否明细：</label>
                            </td>
                            <td class="right">
                                <asp:CheckBox ID="IsDetail" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td class="left">
                                <label for="txtDescription">
                                    产品描述：</label>
                            </td>
                            <td colspan="3">
                                <asp:TextBox ID="txtDescription" runat="server" MaxLength="100" title="请输入产品描述!"
                                    Height="50px" TextMode="MultiLine" Width="668px"></asp:TextBox>
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="display: none;" id="productImages">
                    <table class="layout">
                        <tr>
                            <td class="right">
                                <div style="float: right;">
                                    <div id="status-message" class="red" style="padding: 5px;">
                                        单击按钮选择产品图片文件:</div>
                                    <div id="custom-queue" class="uploadifyQueue">
                                    </div>
                                    <div style="width: 130px; float: left;">
                                        <input id="custom_file_upload" width="120px" type="file" height="30px" name="Filedata" />
                                    </div>
                                    <div style="float: left">
                                        <a title="上传" href="javascript:UpLoad()" class="button" id="A2"><span>上传产品图片</span></a>
                                        <a href="javascript:$('#custom_file_upload').uploadifyClearQueue()" style="margin-left: 5px;"
                                            class="button"><span>取消上传</span></a>
                                    </div>
                                    <br style="clear: both" />
                                </div>
                                <div id="" class="mune_thumb">
                                    <table>
                                        <tr>
                                            <td>
                                                <asp:HyperLink runat="server" NavigateUrl="#" ID="Image1" Target="_blank">
                                                    <asp:Image ID="thumbnail1" runat="server" GenerateEmptyAlternateText="True" BorderWidth="1px"
                                                        ImageUrl="~/ProductImages/Thumbnail/No.jpg" /></asp:HyperLink>
                                            </td>
                                            <td>
                                                <asp:HyperLink runat="server" NavigateUrl="#" ID="Image2" Target="_blank">
                                                    <asp:Image ID="thumbnail2" runat="server" GenerateEmptyAlternateText="True" BorderWidth="1px"
                                                        ImageUrl="~/ProductImages/Thumbnail/No.jpg" /></asp:HyperLink>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <asp:HyperLink runat="server" NavigateUrl="#" ID="Image3" Target="_blank">
                                                    <asp:Image ID="thumbnail3" runat="server" BorderWidth="1px" GenerateEmptyAlternateText="True"
                                                        ImageUrl="~/ProductImages/Thumbnail/No.jpg" /></asp:HyperLink>
                                            </td>
                                            <td>
                                                <asp:HyperLink runat="server" NavigateUrl="#" ID="Image4" Target="_blank">
                                                    <asp:Image ID="thumbnail4" runat="server" GenerateEmptyAlternateText="True" BorderWidth="1px"
                                                        ImageUrl="~/ProductImages/Thumbnail/No.jpg" /></asp:HyperLink>
                                            </td>
                                        </tr>
                                    </table>
                                    <asp:HiddenField ID="txtImage1" runat="server" Value="#" />
                                    <asp:HiddenField ID="txtImage2" runat="server" Value="#" />
                                    <asp:HiddenField ID="txtImage3" runat="server" Value="#" />
                                    <asp:HiddenField ID="txtImage4" runat="server" Value="#" />
                                </div>
                                <br style="clear: both" />
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="display: none;" id="productAttachment">
                    <table class="layout">
                        <tr>
                            <td class="right">
                                <div style="float: right;">
                                    <div id="status-message2" class="red" style="padding: 5px;">
                                        单击按钮选择产品附件文件:</div>
                                    <div id="custom-queue2" class="uploadifyQueue">
                                    </div>
                                    <div style="width: 130px; float: left;">
                                        <input id="custom_file_upload2" width="120px" type="file" height="30px" name="Filedata2" />
                                    </div>
                                    <div style="float: left">
                                        <a title="上传" href="javascript:UpLoad2()" class="button" id="A1"><span>上传产品附件</span></a>
                                        <a href="javascript:$('#custom_file_upload2').uploadifyClearQueue()" style="margin-left: 5px;"
                                            class="button"><span>取消上传</span></a>
                                    </div>
                                    <br style="clear: both" />
                                </div>
                                <div id="Div1" class="mune_thumb">
                                    <div class="tableList">
                                        <table class="list" width="100%">
                                            <thead>
                                                <tr>
                                                    <th width="250" style="cursor: pointer;">
                                                        <span style="float: left">序号</span>
                                                    </th>
                                                    <th width="250" style="cursor: pointer;">
                                                        <span style="float: left">附件名称</span>
                                                    </th>
                                                    <th width="300" style="cursor: pointer;">
                                                        <span style="float: left">附件说明</span>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr id="Tr1">
                                                    <td>
                                                        1
                                                    </td>
                                                    <td>
                                                        <label id="lblFileName1">
                                                        </label>
                                                    </td>
                                                    <td>
                                                        <label id="lblDesc1">
                                                        </label>
                                                    </td>
                                                </tr>
                                                <tr id="Tr2">
                                                    <td>
                                                        2
                                                    </td>
                                                    <td>
                                                        <label id="lblFileName2">
                                                        </label>
                                                    </td>
                                                    <td>
                                                        <label id="lblDesc2">
                                                        </label>
                                                    </td>
                                                </tr>
                                                <tr id="Tr3">
                                                    <td>
                                                        3
                                                    </td>
                                                    <td>
                                                        <label id="lblFileName3">
                                                        </label>
                                                    </td>
                                                    <td>
                                                        <label id="lblDesc3">
                                                        </label>
                                                    </td>
                                                </tr>
                                                <tr id="Tr4">
                                                    <td>
                                                        4
                                                    </td>
                                                    <td>
                                                        <label id="lblFileName4">
                                                        </label>
                                                    </td>
                                                    <td>
                                                        <label id="lblDesc4">
                                                        </label>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <br style="clear: both" />
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="readOnly" style="padding-right: 12px; height: 25px; padding: 5px; background: url('../themes/default/images/grid/grid.png') repeat scroll 0 0">
                    <a title="关闭" href="javascript:void(0)" class="button" style="float: left" id="btnClose">
                        <span>关闭</span></a>
                    <div class="button" style="float: right; margin-right: 5px;">
                        <div class="buttonContent">
                            <asp:Button ID="btnSave" runat="server" Text="保存" CssClass="serverButton" OnClick="btnSave_Click" />
                        </div>
                    </div>
                    <div style="clear: both; float: none; display: none;">
                    </div>
                </div>
            </div>
            <div class="tabsFooter">
                <div class="tabsFooterContent">
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>
